<template>
  <section>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="DAG Details" name="first">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="key"
            label="指标名">
          </el-table-column>
          <el-table-column
            prop="val"
            label="值">
          </el-table-column>
        </el-table>


        <el-card class="box-card ">
          <div slot="header" class="clearfix">
            <span style="line-height: 36px;">HQL</span>
          </div>
          <pre style="white-space: pre-wrap; word-wrap: break-word;">{{hql}}</pre>
        </el-card>


      </el-tab-pane>
      <el-tab-pane label="DAG Counters" name="second">
        <el-table
          :data="dagCounters"
          border
          style="width: 100%">
          <el-table-column
            prop="groupName"
            label="Group Name">
          </el-table-column>
          <el-table-column
            prop="counterName"
            label="Counter Name">
          </el-table-column>
          <el-table-column
            prop="counterValue"
            label="Counter Value">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>


<script>
  import dao from '../../common/dao'
  import util from '../../common/util'
  export default {
    components: {},
    data() {
      return {
        activeName: 'first',
        tableData: [],
        dagCounters:[],
        hql:''
      }
    },
    methods: {
      handleClick(){},
      pageInit(){
        let row  = util.fetch("page318");
        let dagDetail = row.dagDetail||{};
        this.dagCounters = row.dagCounters||[];

        let tableData = [];
        for(let k in dagDetail) {
          if(k=="hql") this.hql = dagDetail[k]
          else if (k=="startTime"){
            tableData.push({key:k,val:util.getLocalTime(dagDetail[k])})
          }else if (k=="endTime"){
            tableData.push({key:k,val:util.getLocalTime(dagDetail[k])})
          }
          else tableData.push({key:k,val:dagDetail[k]})
        }
        this.tableData = tableData
      }
    },
    mounted () {
      this.pageInit()
    }
  }
</script>

<style scoped>
  .box-card{
    margin-top: 20px;
  }

</style>